<template>
	<view class="my-login">
		<uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
    <button type="primary" class="btn-login" open-type="getUserInfo" @getuserinfo="getuserinfo">一键登录</button>
    <view class="tips-text">登录后尽享更多权益</view>
	</view>
</template>

<script>
  import { mapMutations, mapState } from 'vuex'
	export default {
		data() {
			return {
				
			};
		},
    computed:{
      ...mapState('muser', ['redirectInfo'])
    },
    methods:{
      ...mapMutations('muser', ['updataUserinfo' ,'updataToken', 'updataRedirectInfo']),
      getuserinfo (e) {
        if (e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权！')
        this.updataUserinfo(e.detail.userInfo) // 调用store中的方法，保存用户信息到本地
        this.getToken(e.detail) // 调用获取code 和 发送登录请求拿到token的函数，将一点登录获取到的 e.detail 传进去，以便后续拿到后可以做发送请求的query 
      },
      async getToken(info) { // 拿着login 得来的 code 和一些 getUserinfo得来的 userinfo 换取token
        const [err, res] = await uni.login().catch(err => err) // 用来获取登录凭证 code
        if (err || res.errMsg !== 'login:ok') return uni.$showError('登录失败！') // 如果err 为真 或者 res.errMsg有误
        // 准备参数对象
        console.log(res);
          const query = {
            code: res.code,
            encryptedData: info.encryptedData,
            iv: info.iv,
            rawData: info.rawData,
            signature: info.signature
          }
          // 发送token 请求
         const {data: ress} = await uni.$http.post('/api/public/v1/users/wxlogin', query)
         console.log(ress);
          if (ress.meta.status !== 200) {
            // return uni.$showMsg('登录失败！')
            uni.$showMsg('登录失败！')
          }
          uni.$showMsg('登录成功')
          // this.updataToken(ress.message.token) // 调用store中的方法保存token到本地
          this.navigateBack()
      },
      navigateBack () { // 拿着vuex 中的路由重定向 对象，跳转到之前的页面
        if (this.redirectInfo && this.redirectInfo.openType === 'switchTab') {
          uni.switchTab({
            url: this.redirectInfo.from,
             complete: () => { // 执行完毕后，不管成功失败都会执行
              this.updataRedirectInfo(null) // 将之前保存的对象的置为空
             }
          })
        }
      }
    }
	}
</script>

<style lang="scss">
.my-login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 750rpx;
  background-color: #f8f8f8;
  position: relative;
  overflow: hidden;
    &::after {
    content: ' ';
    display: block;
        position: absolute;
        width: 100%;
        height: 40px;
        left: 0;
        bottom: 0;
        background-color: white;
        border-radius: 100%;
        transform: translateY(50%);
  }
  .btn-login {
      width: 90%;
      border-radius: 100px;
      margin: 15px 0;
      background-color: #c00000;
    }
    .tips-text {
        font-size: 12px;
        color: gray;
      }
}
</style>
